<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        ul {
            list-style: none;
        }

        img {
            vertical-align: middle;
            width: 22px;
            height: 22px;
        }

        .nav {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 54px;
            background-color: skyblue;
        }

        ul {
            width: 100%;
            height: 54px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        li {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            width: 44px;
            height: 44px;
            background-color: pink;
        }

        tr {
            text-align: center;
            color: #333;
            font-size: 8px;
        }
    </style>
</head>

<body>
    <div class="nav">
        <ul>
            <!-- <li>
                <a href="javascript:">
                    <img src="首页.png" alt="" class="display" style="display: block;">
                    <img src="1.png" alt="" class="none" style="display: none;">
                    <div>首页</div>
                </a>
            </li>
            <li>
                <a href="javascript:">
                    <img src="分类.png" alt="" class="display" style="display: block;">
                    <img src="2.png" alt="" class="none" style="display: none;">
                    <div>分类</div>
                </a>
            </li>
            <li>
                <a href="javascript:">
                    <img src="社区.png" alt="" class="display" style="display: block;">
                    <img src="3.png" alt="" class="none" style="display: none;">
                    <div>社区</div>
                </a>
            </li>
            <li>
                <a href="javascript:">
                    <img src="购物车.png" alt="" class="display" style="display: block;">
                    <img src="4.png" alt="" class="none" style="display: none;">
                    <div>购物车</div>
                </a>
            </li>
            <li>
                <a href="javascript:">
                    <img src="我的.png" alt="" class="display" style="display: block;">
                    <img src="5.png" alt="" class="none" style="display: none;">
                    <div>我的</div>
                </a>
            </li> -->
        </ul>
    </div>
    <script>
        var datas = [{
            img: '<img src="11.png" alt="">',
            name: "首页"
        }, {
            img: '<img src="22.png" alt="">',
            name: "分类"
        }, {
            img: '<img src="33.png" alt="">',
            name: "社区"
        }, {
            img: '<img src="44.png" alt="">',
            name: "购物车"
        }, {
            img: '<img src="55.png" alt="">',
            name: "我的"
        }]

        var ul = document.querySelector('ul');

        for(var i = 0; i < datas.length; i++) {
            
            var li = document.createElement('li');
            ul.appendChild(li);
            
            for(var k in datas[i]) {
                var tr = document.createElement('tr');
                tr.innerHTML = datas[i][k];
                li.appendChild(tr);
            }
        }

        var img = document.querySelectorAll('img');

        var tr = document.querySelectorAll('tr');

        var li = document.querySelectorAll('li');
        
        for(var i = 0; i < li.length; i++) {
            
            img[i].setAttribute('index',i);
            
            li[i].addEventListener('click', function() {
                
                for(var j = 1; j <= img.length; j++) {
                    img[j-1].src = (j*10 + j) + '.png';
                }
                var color_img = this.querySelector('img');
                var index = color_img.getAttribute('index');
                color_img.src = (parseInt(index) + 1) + '.png';
                
                for(var j = 1; j < tr.length; j = j + 2) {
                    tr[j].style.color = "#333";
                }
                var color_text = this.lastElementChild;
                color_text.style.color = 'orange';
            })
        }
    </script>
</body>

</html>